<template>
    <div class="container">
        <div class="header">
            <van-search v-model="keyWord" show-action placeholder="输入商品名、地点" @search="onKeyWord" @cancel="onCancel" />
        </div>
        <div class="main">
            <div class="default">
                <span @click="onSearch(item.id, item.name)" v-for="item in searchCatoryList"
                    :key="item.id">{{item.name}}</span>
            </div>
            <div class="searchTitle">搜索记录</div>
            <div class="searchLog">
                <div class="list">
                    <span v-for="(item, index) in historyList" :key="index">{{item}}</span>
                </div>
                <span class="btn" @click="del">清除搜索记录</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapGetters,
        mapActions
    } from 'vuex';

    export default {
        name: 'Search',
        data() {
            return {
                keyWord: '',
                historyList: []
            }
        },
        created() {
            this.historyList = JSON.parse(localStorage.getItem('history'));
            this.getSearchCatoryList();
        },
        methods: {
            ...mapActions(['getSearchCatoryList']),
            onSearch(id, name) {
                this.keyWord = name;
                this.$router.push({
                    name: 'searchresult',
                    params: {
                        categoryId: id
                    },
                    query: {
                        keyWord: name
                    }
                });
                this.his();
            },
            onCancel() {
                this.$router.push({
                    path: 'home'
                })
            },
            onKeyWord() {
                this.$router.push({
                    name: 'searchresult',
                    query: {
                        keyWord: this.keyWord
                    }
                });
                this.his();
            },
            del() {
                localStorage.removeItem('history');
                this.historyList = [];
            },
            his() {
                // 搜索记录
                if (this.keyWord) {
                    let history = JSON.parse(localStorage.getItem('history'));
                    if (history) {
                        if (history.length = 3) {
                            history.pop();
                        }
                        history.unshift(this.keyWord)
                        localStorage.setItem('history', JSON.stringify(history));
                    } else {
                        let arr = []
                        arr.push(this.keyWord)
                        localStorage.setItem('history', JSON.stringify(arr));
                    }
                }
            }
        },
        computed: {
            ...mapGetters(['searchCatoryList'])
        }
    }
</script>

<style lang='less' scoped>
    .container {
        height: 100vh;
        background: #F0F0F0;
        letter-spacing: 2px;
        color: #323232;

        .main {
            .default {
                margin: 10px 15px 20px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                background-color: white;

                span {
                    font-size: 15px;
                    text-align: center;
                    width: 70px;
                    display: inline-block;
                    padding: 10px 20px;
                    border-bottom: 1px solid rgb(241, 239, 239);
                    border-right: 1px solid rgb(241, 239, 239);

                    &:nth-child(3n) {
                        border-right: none;
                    }

                    &:nth-last-child(-n+3) {
                        border-bottom: none;
                    }
                }
            }

            .searchTitle {
                margin-left: 15px;
                color: #999;
                font-size: 15px;
            }

            .searchLog {
                height: 66vh;
                background: white;
                margin-top: 10px;

                .list {
                    span {
                        font-size: 15px;
                        display: block;
                        padding: 13px 15px;

                        &:nth-child(3) {
                            border-bottom: 1px solid rgb(241, 239, 239);
                        }
                    }
                }

                .btn {
                    display: block;
                    text-align: center;
                    margin-top: 12px;
                }
            }
        }
    }
</style>